<template>
  <div>
    <router-link to="/role/add">
    <el-button type="primary">
        <i class="el-icon-circle-plus-outline"></i>添加
    </el-button>
    </router-link>
    <div class="bgf">
        <!-- 列表 -->
        <el-table :data="list" >
            <el-table-column prop="id" label="ID" ></el-table-column>
            <el-table-column prop="rolename" label="角色名称" ></el-table-column>
            <el-table-column prop="status" label="状态" >
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status">已启用</el-tag>
                    <el-tag type="danger" v-else>已禁用</el-tag>  
                </template>
            </el-table-column>
            <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                      <router-link :to="'/role/'+scope.row.id"><el-button type="success" icon="el-icon-edit" size="mini" circle  ></el-button></router-link>
                      <el-button type="warning" icon="el-icon-view" size="mini" @click="seeRow(scope.row)" circle></el-button>
                      <el-button type="danger" icon="el-icon-delete" size="mini" @click="delRow(scope.row.id)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 弹框 -->
    <el-dialog  title="角色信息" width="50%"  :visible.sync="dialogVisible" >
        <el-row>
            <el-col :span="8" align="right"><b>角色名称：</b></el-col>
            <el-col :span="10">{{seeInfo.rolename}}</el-col>
        </el-row>
        <br>
        <el-row>
            <el-col :span="8"  align="right"><b>权限节点：</b></el-col>
            <el-col :span="10">
                <!-- 树形控件 -->
                <el-tree 
                ref="tree"
                :data="menulist" 
                show-checkbox  
                :check-strictly="isStrictly"
                node-key="id"  
                :props="{label:'title',children:'children',disabled:true}"
                default-expand-all
                >
               </el-tree>
            </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
// 获取数据、删除数据
import { getMenu } from "@/request/menu"
import { getRole,delRole } from "@/request/role"
export default {
    data(){
        return{
            list:[],
            dialogVisible:false,
            seeInfo:{},
            menulist:[],
            isStrictly:false
        }
    },
    created(){
        this.getlist();  // 获取列表
    },
    methods:{
        async getlist(){
            this.list = await getRole();  //  获取树形数据！
            this.menulist = await getMenu();
        },
        delRow(id){  // 删除某一条数据，接收删除的ID
            // 弹框确认！
            this.$confirm('确定删除吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 删除功能！
                this.list = await delRole(id);
            })
        },
        seeRow(val){
            // 查看
            this.seeInfo = val;
            this.dialogVisible = true;
            // 设置树形控件，选择相关数据信息！
            let menus = val.menus.split(",");
            // 设置为树形控件严格模式，父子互不关联！  
            this.isStrictly = true;
            // 等到树形控件严格模式渲染更新完成之后，再去设置数据！
            this.$nextTick(()=>{
                // 回显数据！设置对应显示的！ 严格模式！
                this.$refs.tree.setCheckedKeys(menus);  
                // 非严格模式！
                this.isStrictly = false;
            })
        }
    },
    components:{
    }
}

</script>
<style scoped>
</style>